<template>
  <view>
    <view class="flex-col align-center u-p-t-24">
      <view class="card" v-for="i in 3" :key="i">
        <u-avatar src="https://picsum.photos/id/472/200/200" size="130"></u-avatar>
        <view class="flex-col justify-around" style="width: 290rpx;height: 100rpx;">
          <view class="title">中国银行</view>
          <view class="sub">储蓄卡</view>
        </view>
        <view class="num text-right" style="width: 200rpx;height: 100rpx;line-height: 100rpx;">****8545</view>
      </view>
    </view>

    <view class="u-p-80">
      <my-btn :size="[230, 80, 28]" bg="#f6ad3c" color="#fff">
        <u-icon name="plus"></u-icon>
        <view class="u-p-l-8">添加银行卡</view>
      </my-btn>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {

      };
    }
  }
</script>

<style lang="scss">
  .card {
    width: 712rpx;
    height: 320rpx;
    margin-bottom: 24rpx;
    padding: 24rpx;
    background: url('https://ae01.alicdn.com/kf/U0cfcfb92bdb94fdb8f2497ee23da2c18d.jpg') center / cover;

    color: #fff;
    display: flex;
    justify-content: space-around;

    .title {
      font-size: 32rpx;
      font-weight: bold;
    }

    .sub {
      font-size: 28rpx;
    }

    .num {
      font-size: 32rpx;
    }
  }
</style>
